<template>
  <div>
    <h3>Home组件</h3>
    <button @click="news">新闻</button>
    <button @click="game">游戏</button>
    <button @click="movie">电影</button>
    <hr />
    <hr />

    <button @click="newsReplace">新闻Replace</button>
    <button @click="gameReplace">游戏Replace</button>
    <button @click="movieReplace">电影Replace</button>
    <hr />
    <hr />
    <button @click="$router.go(2)">前进2</button>
    <button @click="$router.back()">后退</button>
    <button @click="$router.forward()">前进</button>
    <hr />
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    news() {
      /* 
        $router中的五个方法 push replace(不保留历史记录) go(前进或者后退) back(回退)   forward(调用 前进 ) 后面三个首先要有历史记录
      */

      // 字符串
      this.$router.push("/home/new");
    },
    game() {
      // 或者对象类型参数，对象中书写 path属性代表完整地址
      this.$router.push({
        path: "/home/game",
      });
    },
    movie() {
      // 对象里面写命名路由
      this.$router.push({
        name: "movie",
      });
    },
    newsReplace() {
      this.$router.replace("/home/new");
    },
    gameReplace() {
      this.$router.replace("/home/game");
    },
    movieReplace() {
      this.$router.replace("/home/movie");
    },
  },
};
</script>

<style></style>
